<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vertical Bootstrap 3 Tabs Widget</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet"
	href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script
	src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
body {
	background-color: #ddd;
}

h3 {
	margin-top: 0;
}

.tabs-left {
	margin-top: 3rem;
}

.nav-tabs {
	float: left;
	border-bottom: 0;
}

.nav-tabs li {
	float: none;
	margin: 0;
}

.nav-tabs li a {
	margin-right: 0;
	border: 0;
	background-color: #c0392b;
}

.nav-tabs li a:hover {
	background-color: #e74c3c;
}

.nav-tabs .glyphicon {
	color: #fff;
}

.nav-tabs .active .glyphicon {
	color: #333;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus
	{
	border: 0;
}

.tab-content {
	margin-left: 45px;
}

.tab-content .tab-pane {
	display: none;
	background-color: #fff;
	padding: 1.6rem;
	overflow-y: auto;
}

.tab-content .active {
	display: block;
}
</style>
</head>

<body>
	<div class="container">
		<h1>Vertical Bootstrap 3 Tabs Widget</h1>
		<div class="jquery-script-ads" style="margin: 20px 0;">
			<script type="text/javascript">
			<!--
				google_ad_client = "ca-pub-2783044520727903";
				/* jQuery_demo */
				google_ad_slot = "2780937993";
				google_ad_width = 728;
				google_ad_height = 90;
			//-->
			</script>
			<script type="text/javascript"
				src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
				
			</script>
		</div>
		<div class="jquery-script-clear"></div>
	</div>
	<div class="row">
		<div class="col-md-4 col-sm-5">
			<div class="tabs-left">
				<ul class="nav nav-tabs">
					<li class="active"><a href="#home" data-toggle="tab"><span
							class="glyphicon glyphicon-heart"></span></a></li>
					<li><a href="#profile" data-toggle="tab"><span
							class="glyphicon glyphicon-user"></span></a></li>
					<li><a href="#favourite" data-toggle="tab"><span
							class="glyphicon glyphicon-heart-empty"></span></a></li>
					<li><a href="#download" data-toggle="tab"><span
							class="glyphicon glyphicon-cloud-download"></span></a></li>
					<li><a href="#stars" data-toggle="tab"><span
							class="glyphicon glyphicon-star"></span></a></li>
					<li><a href="#settings" data-toggle="tab"><span
							class="glyphicon glyphicon-cog"></span></a></li>
				</ul>
				<div id="myTabContent" class="tab-content">
					<div class="tab-pane active" id="home">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
							Sed felis massa, commodo eu nisi eget, ornare bibendum orci.
							Pellentesque habitant morbi tristique senectus et netus et
							malesuada fames ac turpis egestas. Nulla facilisi. Integer
							convallis est vel lectus placerat, quis aliquam magna iaculis.</p>
					</div>
					<div class="tab-pane" id="profile">
						<p>Quisque mattis lobortis nibh, vitae dictum nisl. Cras
							consectetur aliquam nisi, sit amet facilisis nisi volutpat vitae.
							Fusce vitae risus quis eros facilisis fringilla. Quisque eget
							ultrices ipsum. Mauris nec euismod est, sit amet rhoncus turpis.
						</p>
					</div>
					<div class="tab-pane" id="favourite">
						<p>Suspendisse blandit libero id suscipit consectetur. Cras
							ultrices sem sit amet est efficitur iaculis ut non est. Morbi
							porttitor eu felis ac aliquet.</p>
					</div>
					<div class="tab-pane" id="download">
						<p>Vestibulum viverra ex ut arcu lobortis tempor. Vivamus
							suscipit dictum nisl gravida malesuada. Nulla et quam eget massa
							cursus sodales a quis augue. Maecenas ultrices vitae felis ut
							faucibus. Vivamus vitae convallis nunc, quis vestibulum eros.
							Morbi vel purus nec justo efficitur consequat ac sit amet risus.
							Duis laoreet hendrerit bibendum. Nam tempor volutpat sagittis.</p>
					</div>
					<div class="tab-pane" id="stars">
						<p>Duis laoreet hendrerit bibendum. Nam tempor volutpat
							sagittis. Etiam convallis posuere rhoncus. Donec sit amet
							faucibus magna, vel fermentum velit. Vivamus euismod cursus
							sollicitudin. Aliquam tortor libero, venenatis id nibh
							consectetur, pretium tincidunt est. Nullam neque odio, auctor in
							nisl vel, facilisis convallis massa.</p>
					</div>
					<div class="tab-pane" id="settings">
						<p>Curabitur vel urna vestibulum, egestas sapien accumsan,
							varius ipsum. Aenean eu elit laoreet, sagittis velit in,
							facilisis ligula. Maecenas dictum, lacus sed faucibus lobortis,
							turpis ante ultricies ligula, et posuere nisl mauris non erat.</p>
					</div>
				</div>
				<!-- /tab-content -->
			</div>
			<!-- /tabbable -->
		</div>
		<!-- /col -->
	</div>
	<!-- /row -->
	</div>
	<!-- /container -->
	<script>
		var tabsFn = (function() {

			function init() {
				setHeight();
			}

			function setHeight() {
				var $tabPane = $('.tab-pane'), tabsHeight = $('.nav-tabs')
						.height();

				$tabPane.css({
					height : tabsHeight
				});
			}

			$(init);
		})();
	</script>
	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push([ '_setAccount', 'UA-36251023-1' ]);
		_gaq.push([ '_setDomainName', 'jqueryscript.net' ]);
		_gaq.push([ '_trackPageview' ]);

		(function() {
			var ga = document.createElement('script');
			ga.type = 'text/javascript';
			ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl'
					: 'http://www')
					+ '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0];
			s.parentNode.insertBefore(ga, s);
		})();
	</script>

</body>
</html>
